-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
chore(runway): cherry-pick feat: update recipients UI on swaps #21634
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> Render wallet and account name if the recipient is an imported account, else render the truncated wallet address if the recipient is an external account. We also introduced some refactoring to make us scale the `QuestDetailsCard` by extracting UI and business logic to separate components. <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: Render wallet and account name if the recipient is an imported account, else render the truncated wallet address if the recipient is an external account. Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3311 ```gherkin Scenario: user views bridge quote with wallet and account name Given user is on bridge quote details screen And recipient is set to "Account 1" in "Wallet 1" When bridge quote details are displayed Then recipient row shows "Wallet 1 / Account 1" Scenario: user views bridge quote with external address as recipient Given user is on bridge quote details screen And recipient is set to external address "0x1234567890123456789012345678901234567890" When bridge quote details are displayed Then recipient row shows shortened address "0x12345...67890" Scenario: user opens recipient selector Given user is on bridge quote details screen And recipient is set to "Account 1" When user taps recipient selector button Then recipient selector modal opens Scenario: user views swap quote details Given user is performing a swap (not a bridge) And swap quote details are displayed When bridge recipient row renders Then recipient row is not displayed Scenario: user views bridge quote with no recipient address Given user is on bridge quote details screen And no recipient address is available When bridge quote details are displayed Then recipient row shows "Select recipient" placeholder And no shortened address is displayed ``` <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> <!-- [screenshots/recordings] --> <!-- [screenshots/recordings] --> <img width="786" height="293" alt="image" src="https://github.com/user-attachments/assets/179c99cb-1f5a-4451-9929-6519e9a60d31" /> <img width="786" height="293" alt="image" src="https://github.com/user-attachments/assets/20409fb5-ca18-40e6-ac0b-92bf9ac02750" /> <img width="786" height="293" alt="image" src="https://github.com/user-attachments/assets/3ac89b42-a9c9-454e-9a60-e89018319fb2" /> - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Extracts the recipient row from QuoteDetailsCard into a dedicated component powered by a new hook to display wallet/account names or a shortened external address, and updates tests/snapshots. > > - **Bridge UI**: > - **Recipient Row**: Replaces inline recipient logic in `QuoteDetailsCard` with `QuoteDetailsRecipientKeyValueRow`, which navigates to the recipient selector and hides on swaps. > - Displays `walletName / accountName` for internal accounts or a shortened address for external recipients. > - **Hooks**: > - Adds `useRecipientDisplayData` (`hooks/useRecipientDisplayData`) to derive `destinationDisplayName`, `destinationWalletName`, and `destinationAccountAddress` using multichain selectors and feature flag. > - **Styles**: > - Adds `QuoteDetailsRecipientKeyValueRow.styles.ts` for layout and text truncation. > - **Tests**: > - Adds unit tests for `QuoteDetailsRecipientKeyValueRow` and `useRecipientDisplayData`. > - Updates `QuoteDetailsCard.test.tsx` mocks (multichain selectors) and snapshots to reflect new recipient row structure. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 7db0035. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
| accountNameText: { | ||
| flexShrink: 0, | ||
| minWidth: 0, | ||
| }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
|
Cal-L
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
|
No release label on PR. Adding release label release-7.58.0 on PR, as PR was cherry-picked in branch 7.58.0. |



Description
Render wallet and account name if the recipient is an imported account,
else render the truncated wallet address if the recipient is an external
account. We also introduced some refactoring to make us scale the
QuestDetailsCardby extracting UI and business logic to separatecomponents.
Changelog
CHANGELOG entry: Render wallet and account name if the recipient is an
imported account, else render the truncated wallet address if the
recipient is an external account.
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3311
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Docs and MetaMask Mobile
Coding
Standards.
if applicable
guidelines).
Not required for external contributors.
Pre-merge reviewer checklist
app, test code being changed).
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Note
Introduces a dedicated recipient row component powered by a new hook to display wallet/account names or a shortened external address, and wires it into QuoteDetailsCard with updated tests and snapshots.
QuoteDetailsCardtocomponents/QuoteDetailsRecipientKeyValueRow/QuoteDetailsRecipientKeyValueRowwith dedicated styles.hooks/useRecipientDisplayDatato resolve recipient display name, wallet name, and address (supports multichain and external addresses).QuoteDetailsRecipientKeyValueRow.QuoteDetailsRecipientKeyValueRowanduseRecipientDisplayData.QuoteDetailsCardtest mocks and snapshots to reflect new recipient row structure.Written by Cursor Bugbot for commit f3be9c4. This will update automatically on new commits. Configure here.
2fcd667